<template>
    <div class="main">


        <div style="position: relative;height: 1vh;"></div>
        <!-- <div style="position: relative;height: 5vh;width: 97%;
        margin-left: 1.8%;box-shadow: 0px 0px 1px 1PX rgb(242, 240, 240);
        display: flex;align-items: center;">
            <el-button v-for="(item, index) in buttonMenu" v-if="String(item.menuType) == '1'" :key="index" plain
                type="primary" :icon="item.menuicon" @click="e_function_all(item.menuperms, item.menuRouter)">
                {{ item.menuName }}
            </el-button>
        </div> -->

        <div style="position: relative;height: 1vh;"></div>
        <div
            style="position: relative;height: 6vh;box-shadow: 0px 0px 1px 1PX rgb(242, 240, 240);display: flex;align-items: center;margin-left: 1.8%;width: 97%;">
            部队名字 &nbsp;<el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="searchMap.army_nameLike"
                clearable style="width: 10vw;">&nbsp;</el-input>&nbsp;
            <el-button icon="el-icon-search" plain type="primary" @click="SerchMore">查询</el-button>
        </div>

        <div style="position: relative;height: 1vh;"></div>
        <div style="position: relative;width: 100%;
        margin-left: 1.8%;box-shadow: 0px 0px 1px 1PX rgb(242, 240, 240);
        display: flex;align-items:flex-start;height: 70vh;overflow-y: scroll;">
            <el-table :data="list" style="width: 100%" row-key="army_id">
                <!--prop 后端返回的json数据的字段名-->
                <el-table-column prop="army_name" label="军队名称" width="300">
                </el-table-column>
                <el-table-column label="军队职位" type="expand" width="300">
                    <template slot-scope="props">
                        <el-table :data="props.row.dutyzxList" v-if="props.row.dutyzxList.length > 0">
                            <el-table-column width="30">
                            </el-table-column>
                            <el-table-column prop="duty_code" label="职务编码">
                            </el-table-column>
                            <el-table-column prop="duty_name" label="职务名称">
                            </el-table-column>
                            <el-table-column label="职务状态">
                                <template v-slot="scope">
                                    <el-tag v-if="scope.row.duty_status == 0" type="success">正常</el-tag>
                                    <el-tag v-if="scope.row.duty_status == 1" type="info">禁用</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="create_time" label="创建时间" width="160">
                            </el-table-column>
                            <el-table-column prop="update_time" label="用户修改时间" width="160">
                            </el-table-column>
                            <el-table-column label="操作" width="300">
                                <template v-slot="scope">
                                    <el-button v-for="(item, index) in buttonMenu" v-if="String(item.menuType) == '3'"
                                        :key="index" type="text" :icon="item.menuicon"
                                        @click="e_function_all(item.menuperms, scope.row, props.row.army_id)">
                                        {{ item.menuName }}
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
             
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="300">
                    <template v-slot="scope">
                        <el-button v-for="(item, index) in buttonMenu" v-if="String(item.menuType) == '1'" :key="index"
                            type="text" :icon="item.menuicon"
                            @click="e_function_all(item.menuperms, item.menuRouter, scope.row.army_id)">
                            {{ item.menuName }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--分页-->
        <el-pagination @size-change="sizeData" @current-change="pageData" :page-sizes="[5, 10]" :page-size="5"
            layout="total, sizes, prev, pager, next, jumper" :total="count">
        </el-pagination>



        <el-dialog title="编辑" :visible.sync="dialogFormVisible">
            <el-form label-width="80px" :rules="rules" ref="pojo" :model="pojo">

                <el-form-item label="职务名称" prop="duty_name">
                    <el-input v-model="pojo.duty_name" />
                </el-form-item>
                <el-form-item label="职务编码" prop="duty_code">
                    <el-input v-model="pojo.duty_code" />
                </el-form-item>
                <el-form-item label="职务状态" prop="duty_status">
                    <el-select v-model="pojo.duty_status" placeholder="请选择">
                        <el-option label="启用" :value="0">
                        </el-option>
                        <el-option label="禁用" :value="1">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-button type="primary" @click="handleSave('pojo')">保存</el-button>
                <el-button @click="dialogFormVisible = false">关闭</el-button>
            </el-form>
        </el-dialog>
    </div>
</template>
  
<script>
import ArmyxApi from '@/api/ArmyxRequest.js'
import DutyzxApi from '@/api/dutyzxRequest.js'
import DutyzxarmyxApi from "@/api/dutyzxarmyxRequest"
export default {
    // 组件名称
    name: 'dytyzx',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件
    components: {},
    // 组件状态值
    data() {
        return {
            list: [],
            searchMap: {
                army_id: null,
                army_father_id: null,
                army_big_father: null,
                army_nameLike: null,
                map_id: null,
                order_id: null,
                create_time: null,
                update_time: null,
                pageNum: 1,
                pageSize: 5,
            },
            count: 5,
            pojo: {
                duty_id: null,
                duty_code: null,
                duty_name: null,
                duty_status: 0,
                create_time: null,
                update_time: null,
            },
            dialogFormVisible: false,
            id: '',
            armyid: 0,
            //表单的验证
            rules: {
                duty_name: [
                    { required: true, message: '请输入职位名字', trigger: 'change' }
                ],
                duty_code: [
                    { required: true, message: '请输入编码', trigger: 'change' }
                ],
            },
        }
    },
    // 计算属性
    computed: {
        //获取vuex的数据
        buttonMenu() {
            return this.$store.getters['operation/getButtonList'];
        },
    },
    // 侦听器
    watch: {

    },
    // 组件方法
    methods: {
        //动态按钮执行方法
        e_function_all(function_name, function_data, army_data) {
            if (function_name === 'addDutyz') {
                this.armyid = army_data;

                this.handleEdit('');
            }
            if (function_name === 'updateDutyz') {
                this.handleEdit(function_data.duty_id);
            }   
            if(function_name === 'deleteDuty'){
                this.handleDelete(function_data.duty_id);
            }
        },
        //查询更多
        fetchData() {
            //编写一个方法请求后端的接口，把返回的数据赋值list
            ArmyxApi.ArmyAndAllDutyxz(this.searchMap).then(response => {
                //  //把返回的结果赋值模型
                this.list = response.data.data;
                this.count = response.data.total;
            })
        },
        //查询军队更多
        SerchMore() {
            if (this.searchMap.army_nameLike === '') this.searchMap.army_nameLike = null;
            this.searchMap.pageNum = 1;
            this.searchMap.pageSize = 5;
            this.fetchData();
        },
        //当分页大小产生变化的时候调用该方法
        sizeData(size) {
            this.searchMap.pageSize = size
            this.fetchData()
        },
        pageData(page) {
            this.searchMap.pageNum = page
            this.fetchData()
        },
        //新增和修改使用同一个函数打开弹窗，区别是新增没有id
        handleEdit(id) {
            this.id = id
            //打开弹窗
            this.dialogFormVisible = true
            if (id !== '') {
                //根据id查询数据绑定到模型上面
                DutyzxApi.selectByDuty_id(id).then(reponse => {
                    this.pojo = reponse.data;
                })
            } else {
                this.pojo = {
                    duty_id: null,
                    duty_code: null,
                    duty_name: null,
                    duty_status: 0,
                    create_time: null,
                    update_time: null,
                } //清空数据
            }
        },
        //新增和修改保存数据的方法
        handleSave(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.id === null || this.id === '') {
                        DutyzxApi.insert(this.pojo).then(reponse => {

                            let obj = {
                                army_id: this.armyid,
                                duty_id: reponse.data.duty_id
                            }
                            DutyzxarmyxApi.insert(obj).then(res => {
                                //重新加载列表数据
                                this.fetchData()
                                //关闭弹窗
                                this.dialogFormVisible = false
                            })
                        })
                    } else {
                        DutyzxApi.insertOrUpdate(this.pojo).then(reponse => {
                            //新增或者修改成功
                            //重新加载列表数据
                            this.fetchData()
                            //关闭弹窗
                            this.dialogFormVisible = false

                        })
                    }
                } else {
                    this.$message({
                        message: '请输入数值',
                        type: 'error'
                    })
                    return false;
                }
            })
        },
        handleDelete(id) {
            this.$confirm('您确定要删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                DutyzxApi.deleteByDuty_id(id).then(reponse => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.fetchData()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
    },
    // 以下是生命周期钩子   注：没用到的钩子请自行删除
    /**
    * 在实例初始化之后，组件属性计算之前，如data属性等
    */
    beforeCreate() {
    },
    /**
    * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
    */
    created() {
        this.fetchData();
    },
    /**
    * 在挂载开始之前被调用：相关的 render 函数首次被调用。
    */
    beforeMount() {

    },
    /**
    * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
    * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
    */
    mounted() {
    },
    /**
    * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
    * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
    */
    beforeUpdate() {
    },
    /**
    * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
    * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
    */
    updated() {
    },
    /**
    * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
    */
    activated() {
    },
    /**
    * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
    */
    deactivated() {
    },
    /**
    * 实例销毁之前调用。在这一步，实例仍然完全可用。
    */
    beforeDestroy() {
    },
    /**
    * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
    * 所有的事件监听器会被移除，所有的子实例也会被销毁。
    */
    destroyed() {
    }
}
</script> 
  
  
<style scoped ></style>
  